<template>
  <el-switch
    class="lk-switch"
    :class="[cls]"
    v-bind="SwitchProps"
    v-on="$listeners"
    :data-open="openText"
    :data-close="closeText"
  ></el-switch>
</template>

<script>
import { Switch } from 'element-ui';

export default {
  name: 'LkSwitch',
  props: Object.assign({}, Switch.props, {
    size: {
      type: String,
      default: ''
    },
    openText: {
      type: String,
      default: '是'
    },
    closeText: {
      type: String,
      default: '否'
    }
  }),
  components: {},
  // 定义属性
  data () {
    return {};
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    SwitchProps () {
      const props = {};
      Object.keys(Switch.props).forEach(k => {
        typeof this[k] !== 'undefined' && (props[k] = this[k]);

        return props[k];
      });
      return props;
    },
    cls () {
      if (!this.size) {
        return '';
      } else {
        return `lk-switch-${this.size}`;
      }
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.lk-switch{
  --switch-size: 22px;
  height: var(--switch-size);
  line-height: var(--switch-size);
  overflow: hidden;
  &:before,
  &:after {
    position: absolute;
    top: 0;
    z-index: 2;
    line-height: var(--switch-size);
    font-size: calc(var(--switch-size) * 0.5);
    color: #fff;
    transition: all 0.3s;
    cursor: pointer;
  }
  &:before {
    content: attr(data-open);
    left: calc(var(--switch-size) * (-0.7) - 2px);
  }
  &:after {
    content: attr(data-close);
    left: calc(var(--switch-size) * (1.1));
  }
  ::v-deep .el-switch__core{
    height: var(--switch-size);
    border-radius: calc(var(--switch-size) * 0.5);
    width: calc(var(--switch-size) * 2)!important;
    &:after{
      width: calc(var(--switch-size) - 4px);
      height: calc(var(--switch-size) - 4px);
    }
  }
  &.is-checked ::v-deep .el-switch__core::after {
    margin-left: calc(var(--switch-size) * (-1) + 3px);
  }
  &.is-checked:before{
    left: calc(var(--switch-size) * (0.3) + 1px);
  }
  &.is-checked::after{
    left: calc(var(--switch-size) * (2.1) + 3px);
  }
}
</style>
